<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="终端状态">
			<view class="u-m-r-20 " slot="right" @click="triggleDrop()">
				筛选
			</view>

		</u-navbar>
		<view class="flex terminal-state__header">
			<u-search placeholder="请输入终端或机器sn号" v-model="merchantNo" shape="square" bg-color="#f6f6f6"
				:show-action="false" @search="search" class="flex-1"></u-search>
			<u-image class="u-margin-left-10" width="60rpx" height="60rpx" :src="src"></u-image>
		</view>
		<!-- 机具状态 1-未绑定 2-已绑定 status-->
		<!-- hardwareType 2 传统POS 1 电签POS-->
		<!-- activeStatus 1 已激活 -->
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item " v-for="(item,index) in terminalList" :key="index"
					@click="goStateDetail(item)">
					<view class="flex">
						<u-image :src="thumb" width="40" height="40" class="card__icon mr-10"></u-image>
						<view class="">
							终端SN：{{item.sn}}
						</view>

					</view>
					<view class="flex u-margin-top-20">
						<view class="">
							活动类型:
						</view>
						<view class="">
							{{item.policyName}}
						</view>
					</view>
					<view class="flex u-margin-top-10 u-font-13 u-tips-color" v-if="item.status=='2'">
						<view class="">
							{{item.merSubName}}:
						</view>
						<view class="u-margin-left-20">
							({{item.merchantNo}})
						</view>

					</view>
					<view class="flex u-margin-top-10">
						<view class="">
							状态：
						</view>
						<view class="yellow" v-if="item.status=='1'">
							未绑定
						</view>
						<view class="price-text" v-else>
							已绑定
						</view>
					</view>

					<view class="flex u-margin-top-10">
						<view class="">
							终端类型：
						</view>
						<view class="" v-if="item.hardwareType=='1'">
							电签POS
						</view>
						<view class="" v-else>
							传统pos
						</view>
					</view>
					<view class="flex u-margin-top-10">
						<view class="">
							激活状态：
						</view>
						<view class="" v-if="item.activeStatus=='1'">
							已激活
						</view>
						<view class="" v-else>
							未激活
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<u-popup v-model="showPopup" mode="center" width="750rpx" negative-top="400" class="pop_filter">
			<view>
				<view class="pop_filter__title u-margin-left-20">
					绑定状态
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn " :class="{'pop_filter__select':checked===index}"
						v-for="(item,index) in bindStates" :key="index" @click="selectBtn(
					'1',index)">
						{{item.label}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					设备类型
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn" v-for="(item,index) in typeFilter" :key="index"
						:class="{'pop_filter__select':typeChecked===index}" @click="selectBtn('2',index)">
						{{item.label}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					激活状态
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn" v-for="(item,index) in activeStates" :key="index"
						:class="{'pop_filter__select':activeChecked===index}" @click="selectBtn('3',index)">
						{{item.label}}
					</view>
				</view>

				<view class="flex u-margin-20 u-padding-top-20">
					<u-button type="primary" class="flex-1 u-m-r-15" :custom-style="customCancelStyle"
						hover-class="false" @click="cancel()">重置</u-button>
					<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
						hover-class="false" @click="submitFilter()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				checked: null,
				activeChecked: null,
				typeChecked: null,
				customCancelStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#f6f6f6',
					color: 'black'

				},
				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white'
				},
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_terminal_status.png",
				pageNo: 1,
				pageSize: "10",
				requstBody: {
					"status": "", //绑定状态
					"deviceType": "", //类型
					"activeStatus": "", //激活状态
					"beginSn": "",
				},
				terminalList: [],
				merchantNo: "",
				scrollTop: 0,
				status: "loadmore",
				showPopup: false,
				bindStates: [{
						label: '全部',
						value: '',
					},
					{
						label: '已绑定',
						value: '2',
					},
					{
						label: '未绑定',
						value: '1',
					}
				],
				typeFilter: [{
						label: '全部',
						value: '',
					},
					{
						label: '电签pos',
						value: '2',
					},
					{
						label: '传统pos',
						value: '1',
					}
				],
				activeStates: [{
						label: '全部',
						value: '',
					},
					{
						label: '未激活',
						value: '0',
					},
					{
						label: '已激活',
						value: '1',
					}
				],
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.terminalInfoList();
		},
		methods: {
			selectBtn(type, index) {
				if (type == "1") {
					this.checked = index;
				} else if (type == "2") {
					this.typeChecked = index;
				} else {
					this.activeChecked = index;
				}

			},
			cancel() {
				const _that = this;
				_that.requstBody.status = "";
				_that.requstBody.deviceType = "";
				_that.requstBody.activeStatus = "";
				_that.typeChecked = null;
				_that.checked = null;
				_that.activeChecked = null;

			},
			submitFilter() {
				const _that = this;
				if (_that.checked) {
					_that.requstBody.status = _that.bindStates[_that.checked].value;
				}
				if (_that.activeChecked) {
					_that.requstBody.activeStatus = _that.activeStates[_that.activeChecked].value;
				}
				if (_that.typeChecked) {
					_that.requstBody.deviceType = _that.typeFilter[_that.typeChecked].value;
				}
				_that.pageNo = 1;
				_that.terminalList = [];
				_that.showPopup = false;
				_that.terminalInfoList();
			},
			triggleDrop() {

				this.showPopup = !this.showPopup;

			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.terminalInfoList();
			},
			terminalInfoList() {

				let _that = this;
				_that.$zx.terminal_api.terminalInfoList(this.pageNo, this.pageSize, this.requstBody).then((data) => {


					_that.terminalList = _that.terminalList.concat(data);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},
			search(e) {
				console.log("e=" + e)
				this.requstBody.beginSn = e;
				this.pageNo = 1;
				this.terminalList = [];
				this.terminalInfoList();
			},
			goStateDetail(item) {
				let itemStr = JSON.stringify(item)
				this.$u.route('packageB/pages/main/terminal/terminalStateDetail', {
					"item": encodeURIComponent(itemStr)
				})
			}

		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
		}
	}

	.yellow {
		color: #FF8E00;
	}

	.pop_filter {
		position: absolute;
		// top: 80rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__btn {
			background-color: #f6f6f6;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("/static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}
</style>